import React, { useState, useEffect, useRef } from 'react';
import { Carousel } from 'antd';

import './index.less';
import styles from './index.less';
import ChartLine from './components/line';
import Select from './select';

import { getDataList } from '@/api';
const isDev = process.env.NODE_ENV === 'development';

const IndexPage = () => {
  const carouselRef = useRef();

  const [time, setTime] = useState('');
  const [monitor, setMonitor] = useState(true);
  const [flag, setFlag] = useState(true);
  const [datalist, setDatalist] = useState([]);

  const [chartLine, setChartLine] = useState({
    dataX: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
    data: [
      {
        name: '设备1',
        data: [2000, 1800, 1900, 2200, 2000, 1000, 1990],
      },
      {
        name: '设备2',
        data: [2000, 900, 1500, 1200, 1100, 2000, 1100],
      },
      {
        name: '设备3',
        data: [200, 1000, 2100, 2300, 2800, 1800, 2100],
      },
      {
        name: '设备4',
        data: [600, 3600, 2550, 3700, 3500, 2200, 3500],
      },
    ],
  });

  useEffect(() => {
    const fn = async () => {
      const { data, isLogin, siteName, loginPath } = await getDataList();
      if (!isLogin && !isDev) {
        window.location.href = loginPath;
      }
      setDatalist(data);
      document.title = siteName || '气象大屏';
    };
    fn();
    formatDateTime();
  }, []);

  // 左边数据

  // 右边数据

  function formatDateTime() {
    function addZero(num) {
      return num < 10 ? '0' + num : num;
    }
    setInterval(() => {
      var standardTime = new Date();
      var year = standardTime.getFullYear();
      var month = standardTime.getMonth() + 1;
      var date = standardTime.getDate();
      var hour = standardTime.getHours();
      var minute = standardTime.getMinutes();
      var second = standardTime.getSeconds();
      var formattedTime =
        year +
        '-' +
        addZero(month) +
        '-' +
        addZero(date) +
        ' ' +
        addZero(hour) +
        ':' +
        addZero(minute) +
        ':' +
        addZero(second);

      setTime(formattedTime);
    }, 1000);
  }

  const baseInfo = [
    {
      label: '杀虫总量',
      value: 23183,
      tag: '个',
      list: [{ title: 'xx区杀虫数量', titleNum: '120' }],
    },
    {
      label: '设备总量',
      value: 500,
      tag: '个',
      list: [
        { title: '在线', titleNum: '450' },
        { title: '离线', titleNum: '50' },
      ],
    },
    {
      label: '区数量',
      value: 500,
      tag: '个',
      list: [
        { title: '正常区', titleNum: '4' },
        { title: '异常区', titleNum: '6' },
      ],
    },
  ];
  const chartLine11 = {
    dataX: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7'],
    data: [
      {
        name: '设备1',
        data: [2000, 1800, 1900, 2200, 2000, 1000, 1990],
      },
      {
        name: '设备2',
        data: [2000, 900, 1500, 1200, 1100, 2000, 1100],
      },
      {
        name: '设备3',
        data: [2100, 1000, 2100, 2300, 2800, 1800, 2100],
      },
      {
        name: '设备4',
        data: [2600, 3600, 2550, 3700, 3500, 2200, 3500],
      },
    ],
  };
  const dataList = [
    {
      value: '选项1',
      label: '10月 ',
    },
    {
      value: '选项2',
      label: '9月',
    },
    {
      value: '选项3',
      label: '8月',
    },
    {
      value: '选项4',
      label: '7月',
    },
    {
      value: '选项5',
      label: '6月',
    },
  ];

  function monitorFun() {
    if (monitor) {
      return (
        <Carousel
          ref={carouselRef}
          dotPosition="right"
          // dots={false}
          effect="scrollx"
          autoplaySpeed={7000}
          autoplay
          style={{ width: '100%', height: '100%' }}
        >
          <div>
            <div className="divBox2">
              <div className="cont-title">
                <span
                  style={{ cursor: 'pointer', color: flag ? '' : '#8CACD5' }}
                  onClick={() => {
                    setFlag(true);
                    setChartLine(chartLine11);
                  }}
                >
                  &nbsp;设备输出电量
                </span>{' '}
                <div className="selectDiv">
                  <Select data={dataList} />
                </div>
              </div>
              <div className="contentbox">
                <ChartLine v={chartLine} />
              </div>
            </div>
          </div>
          <div>
            <div className="divBox">
              <div className="cont-body">
                {baseInfo.map((item, index) => (
                  <div
                    className={
                      item.list.length == 1
                        ? 'cont-item'
                        : 'cont-item cont-itemTwo'
                    }
                    key={index}
                  >
                    <div className="label">{item.label}</div>
                    <div className="value">
                      {item.value}
                      <span>{item.tag}</span>
                    </div>
                    {item.list &&
                      item.list.map((i, j, arr) => {
                        if (arr.length == 1) {
                          return (
                            <div className="oneBox" key={j}>
                              <div>
                                {i.titleNum}{' '}
                                <span className="sapnStyle"> 个</span>
                              </div>
                              <div className="titleName">{i.title}</div>
                            </div>
                          );
                        } else {
                          return (
                            <div className="marginTOp50">
                              <div className="twoBox" key={j}>
                                <div>{i.title}</div>
                                <div>
                                  {i.titleNum}
                                  <span className="sapnStyle"> 个</span>
                                </div>
                              </div>
                            </div>
                          );
                        }
                      })}
                    <div></div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {datalist?.map((item, Index) => (
            <div key={Index}>
              <div className="cont-flex">
                {item?.map((item, index) => (
                  <div key={index} className="oneItemBox">
                    <div
                      className="img"
                      style={
                        item.url
                          ? {
                              background: `url(${item.url}) no-repeat center / cover`,
                            }
                          : null
                      }
                    ></div>
                    <div>
                      <div className="name">{item.meteorology}</div>
                      <div className="value">
                        {item.value}
                        <span className="valueUnit">{item.unit}</span>
                      </div>
                      
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Carousel>
      );
    }
  }
  return (
    <div className="allpageBg">
      <div className="allpage">
        <div className="main-wrap">
          <div className="cont-content">
            <div className="home-right">
              <div className="home-top">
                <div className="TimeDiv">{time}</div>
                <div className="cont-title">气象站</div>
                <div className="cont-body">{monitorFun()}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default IndexPage;
